@import "theme.styl"

border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ''

border-none()
  &:after
    display:none

.clearfix
  display: inline-block
  &:after
    display: block
    content: "."
    height: 0
    line-height: 0
    clear: both
    visibility: hidden

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform : scaleY(0.7)
      transform : scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform : scaleY(0.5)
      transform : scaleY(0.5)

//.scroll-control {
//  position: fixed;
//  width: 100%;
//}

.custom-scrollbar
  scrollbar-arrow-color #f4ae21 /**//*三角箭头的颜色*/
  scrollbar-face-color #333; /**//*立体滚动条的颜色*/
  scrollbar-3dlight-color #666; /**//*立体滚动条亮边的颜色*/
  scrollbar-highlight-color #666; /**//*滚动条空白部分的颜色*/
  scrollbar-shadow-color #999; /**//*立体滚动条阴影的颜色*/
  scrollbar-darkshadow-color #666; /**//*立体滚动条强阴影的颜色*/
  scrollbar-track-color #666; /**//*立体滚动条背景颜色*/
  scrollbar-base-color #f8f8f8; /**//*滚动条的基本颜色*/
  &::-webkit-scrollbar
    /*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
    width 10px
    height 10px
  &::-webkit-scrollbar-button
    /*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
    /*background $default-border-color */
    display none
  &::-webkit-scrollbar-track
    /*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
    /*background $default-border-color */
  &::-webkit-scrollbar-track-piece
    /*内层轨道，滚动条中间部分（位置4）*/
    background $default-border-color
    border-radius 4px
  &::-webkit-scrollbar-thumb
    /*滚动条里面可以拖动的那部分（位置5）*/
    background $color-gradually-gray-71
    border-radius 4px
  &::-webkit-scrollbar-corner
    /*边角（位置6）*/
    background $default-border-color
  &::-webkit-scrollbar-resizer
    background $default-border-color

.hide-scrollbar
  scrollbar-arrow-color #f4ae21 /**//*三角箭头的颜色*/
  scrollbar-face-color #333; /**//*立体滚动条的颜色*/
  scrollbar-3dlight-color #666; /**//*立体滚动条亮边的颜色*/
  scrollbar-highlight-color #666; /**//*滚动条空白部分的颜色*/
  scrollbar-shadow-color #999; /**//*立体滚动条阴影的颜色*/
  scrollbar-darkshadow-color #666; /**//*立体滚动条强阴影的颜色*/
  scrollbar-track-color #666; /**//*立体滚动条背景颜色*/
  scrollbar-base-color #f8f8f8; /**//*滚动条的基本颜色*/
  &::-webkit-scrollbar
    /*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
    width 0
    height 0
  &::-webkit-scrollbar-button
    /*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
    display none



